วิธีที่ PWA, WebAssembly และ ChromeOS ช่วยให้โปรแกรมตัดต่อวิดีโอบนเว็บมีประสิทธิภาพดีขึ้นและมอบประสบการณ์การใช้งานที่น่าสนใจยิ่งขึ้นให้แก่ผู้ใช้ 12 ล้านคน
97%
การเติบโตรายเดือนในการติดตั้ง PWA
2.3 x
การปรับปรุงประสิทธิภาพ
9%
การคงผู้ใช้ PWA ไว้ได้นานขึ้น
Clipchamp เป็นโปรแกรมตัดต่อวิดีโอออนไลน์ในเบราว์เซอร์ที่ช่วยให้ทุกคนสามารถบอกเล่าเรื่องราวที่ควรแชร์ผ่านวิดีโอ ครีเอเตอร์กว่า 12 ล้านคนทั่วโลกใช้ Clipchamp เพื่อตัดต่อวิดีโอได้อย่างง่ายดาย เรามีโซลูชันง่ายๆ สำหรับการสร้างวิดีโอ ตั้งแต่เครื่องมือที่ใช้งานง่าย เช่น การครอบตัดและการตัด ไปจนถึงฟีเจอร์ที่เป็นประโยชน์ เช่น เครื่องบันทึกหน้าจอ และแม้แต่เครื่องมือสร้างมีม
ใครใช้ Clipchamp
ผู้ใช้ของเรา (หรือผู้แก้ไขทั่วไปตามที่เราเรียก) มีความหลากหลาย คุณไม่จำเป็นต้องเป็นผู้เชี่ยวชาญก็ตัดต่อวิดีโอได้โดยใช้ Clipchamp กล่าวโดยละเอียดคือ เราสังเกตเห็นทีมฝ่ายขาย ทีมฝึกอบรมการสนับสนุน และทีมการตลาดผลิตภัณฑ์ที่ใช้เว็บแคมของเราและโปรแกรมบันทึกหน้าจอเพื่อสร้างเนื้อหาอธิบายแบบสั้นๆ พร้อมเพิ่มข้อความและ GIF เพื่อให้เนื้อหาน่าสนใจ นอกจากนี้ เรายังพบว่าธุรกิจขนาดเล็กจำนวนมากแก้ไขและโพสต์วิดีโอโซเชียลขณะเดินทาง
ลูกค้าพบปัญหาอะไรบ้าง
เราทราบดีว่าการตัดต่อวิดีโออาจเป็นเรื่องยากในตอนแรก ผู้ใช้อาจคิดว่าการตัดต่อวิดีโอเป็นเรื่องยาก เนื่องจากเคยมีประสบการณ์ที่ไม่ดีกับซอฟต์แวร์ตัดต่อที่ซับซ้อน ในทางตรงกันข้าม Clipchamp มุ่งเน้นที่ความสะดวกและใช้งานง่าย โดยให้การสนับสนุนด้วยการวางซ้อนข้อความ วิดีโอและเพลงสต็อก เทมเพลต และอื่นๆ
เราพบว่าผู้ตัดต่อทั่วไปส่วนใหญ่ไม่ได้ต้องการสร้างผลงานภาพเคลื่อนไหวที่ยอดเยี่ยม เราพูดคุยกับผู้ใช้ของเราบ่อยครั้งและได้รับการเตือนอยู่เสมอว่าผู้ใช้มีภารกิจมากมายและต้องการแชร์เรื่องราวให้โลกรู้อย่างรวดเร็วและง่ายดายที่สุด เราจึงมุ่งเน้นที่เรื่องนี้
การพัฒนา PWA ของ Clipchamp
Clipchamp มุ่งมั่นที่จะส่งเสริมให้ผู้คนบอกเล่าเรื่องราวผ่านวิดีโอ ด้วยเหตุนี้ เราจึงตระหนักว่าการให้ผู้ใช้ใช้ฟุตเทจของตนเองเมื่อสร้างโปรเจ็กต์วิดีโอเป็นสิ่งสำคัญ
ข้อมูลเชิงลึกนี้ทำให้ทีมวิศวกรของ Clipchamp ต้องคิดค้นเทคโนโลยีที่สามารถประมวลผลไฟล์สื่อขนาดกิกะไบต์ในเว็บแอปพลิเคชันได้อย่างมีประสิทธิภาพ เมื่อพิจารณาข้อจำกัดของแบนด์วิดท์เครือข่ายแล้ว เราจึงตัดโซลูชันแบบคลาวด์ดั้งเดิมออกอย่างรวดเร็ว การอัปโหลดไฟล์สื่อขนาดใหญ่จากการเชื่อมต่ออินเทอร์เน็ตแบบค้าปลีกจะทำให้ต้องรอเป็นเวลานานก่อนที่จะเริ่มตัดต่อได้ ซึ่งส่งผลให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี
ด้วยเหตุนี้ เราจึงเปลี่ยนไปใช้โซลูชันในเบราว์เซอร์ทั้งหมด ซึ่งจะประมวลผลวิดีโออย่างหนักหน่วงทั้งหมดในเครื่องโดยใช้ทรัพยากรฮาร์ดแวร์ที่มีอยู่ในอุปกรณ์ของผู้ใช้ เราวางเดิมพันเชิงกลยุทธ์กับเบราว์เซอร์ Chrome และแพลตฟอร์ม ChromeOS โดยปริยายเพื่อช่วยให้เราเอาชนะความท้าทายที่หลีกเลี่ยงไม่ได้ในการสร้างแพลตฟอร์มการสร้างวิดีโอในเบราว์เซอร์
การประมวลผลวิดีโอต้องใช้ทรัพยากรจำนวนมาก ซึ่งส่งผลต่อทรัพยากรของคอมพิวเตอร์และพื้นที่เก็บข้อมูล เราเริ่มสร้าง Clipchamp เวอร์ชันแรกโดยอิงตามไคลเอ็นต์เนทีฟ (แบบพกพา) (PNaCl) ของ Google แม้ว่า PNaCl จะเลิกใช้งานไปในที่สุด แต่เราก็ได้ข้อสรุปที่ยอดเยี่ยมจาก PNaCl ว่าเว็บแอปสามารถทำงานได้อย่างรวดเร็วและมีความล่าช้าต่ำในขณะที่ยังทำงานบนฮาร์ดแวร์ของผู้ใช้
เมื่อเปลี่ยนไปใช้ WebAssembly ในภายหลัง เราดีใจที่ได้เห็น Chrome เป็นผู้นำในการรวมฟีเจอร์หลัง MVP เช่น การดำเนินการกับหน่วยความจำจำนวนมาก การแยกชุดข้อความ และล่าสุดคือการดำเนินการกับเวกเตอร์แบบความกว้างคงที่ ทีมวิศวกรของเราคาดหวังอย่างมากว่าจะมีการใช้งาน SIMD มากขึ้น ซึ่งจะช่วยให้เราเพิ่มประสิทธิภาพสแต็กการประมวลผลวิดีโอเพื่อใช้ประโยชน์จากการดำเนินการ SIMD ซึ่งพบได้ทั่วไปใน CPU สมัยใหม่ เราได้ใช้ประโยชน์จากการรองรับ SIMD ของ WebAssembly ใน Chrome เพื่อเร่งความเร็วของปริมาณงานที่ต้องใช้ทรัพยากรมากเป็นพิเศษ เช่น การถอดรหัสวิดีโอ 4K และการเข้ารหัสวิดีโอ
หนึ่งในวิศวกรของเราปรับปรุงประสิทธิภาพได้ 2.3 เท่าภายในเวลาไม่ถึง 1 เดือนด้วยประสบการณ์เพียงเล็กน้อยก่อนหน้านี้ แม้ว่าจะยังจำกัดอยู่ในการทดลองใช้แหล่งที่มาของ Chrome แต่เราก็สามารถเปิดตัวการปรับปรุง SIMD เหล่านี้แก่ผู้ใช้ส่วนใหญ่ได้แล้ว แม้ว่าผู้ใช้จะตั้งค่าฮาร์ดแวร์แตกต่างกันมาก แต่เรายืนยันได้ว่าประสิทธิภาพในเวอร์ชันที่ใช้งานจริงเพิ่มขึ้นโดยไม่พบผลกระทบที่เสียเปรียบใดๆ ในอัตราข้อผิดพลาด
เมื่อเร็วๆ นี้เราได้ผสานรวม WebCodecs API ที่เพิ่งเปิดตัว ซึ่งปัจจุบันอยู่ภายใต้ช่วงทดลองใช้จากต้นทางของ Chrome อีกรายการ ความสามารถใหม่นี้จะช่วยให้เราปรับปรุงประสิทธิภาพในการถอดรหัสวิดีโอบนฮาร์ดแวร์ที่มีสเปคต่ำได้มากขึ้น ซึ่งพบได้ใน Chromebook ยอดนิยมหลายรุ่น
เมื่อสร้าง PWA แล้ว สิ่งสำคัญคือต้องส่งเสริมให้ผู้ใช้นำไปใช้งาน เช่นเดียวกับแอปบนเว็บจำนวนมาก เรามุ่งเน้นที่ความสะดวกในการเข้าถึง ซึ่งรวมถึงการเข้าสู่ระบบโซเชียล รวมถึง Google เพื่อนำผู้ใช้ไปยังส่วนที่สามารถแก้ไขวิดีโอได้อย่างรวดเร็ว และทำให้การส่งออกวิดีโอเป็นเรื่องง่าย นอกจากนี้ เรายังได้โปรโมตข้อความแจ้งให้ติดตั้ง PWA ในแถบเครื่องมือและแสดงเป็นข้อความป๊อปอัปในการนําทางเมนู
ผลลัพธ์
PWA ของ Chrome ที่ติดตั้งได้ของเราทำงานได้ดีมาก เรายินดีอย่างยิ่งที่ได้เห็นว่าผู้ใช้ PWA มีการคงผู้ใช้ไว้สูงกว่าผู้ใช้เดสก์ท็อปมาตรฐานถึง 9% การติดตั้ง PWA เพิ่มขึ้นอย่างมาก โดยเพิ่มขึ้น 97% ต่อเดือนตั้งแต่ที่เราเปิดตัวเมื่อ 5 เดือนที่ผ่านมา และอย่างที่ได้กล่าวไปก่อนหน้านี้ การปรับปรุง SIMD ของ WebAssembly ช่วยเพิ่มประสิทธิภาพได้ 2.3 เท่า
อนาคต
เราประหลาดใจกับอัตราการมีส่วนร่วมและการใช้งาน PWA เราคิดว่าการคงผู้ใช้ของ Clipchamp ไว้ได้รับประโยชน์เนื่องจากมีการติดตั้ง PWA และเข้าถึงได้ง่ายขึ้น นอกจากนี้ เรายังพบว่า PWA มีประสิทธิภาพดีกว่าสำหรับเครื่องมือแก้ไข ซึ่งทำให้เครื่องมือน่าสนใจยิ่งขึ้นและดึงดูดให้ผู้ใช้กลับมาใช้งาน
เมื่อมองไปในอนาคต เรารู้สึกตื่นเต้นกับโอกาสที่ ChromeOS มอบให้ผู้ใช้จำนวนมากขึ้นทำงานได้มากขึ้นโดยไม่ต้องกังวล โดยเฉพาะอย่างยิ่ง เราตื่นเต้นกับการผสานรวมที่สะดวกกับระบบปฏิบัติการในเครื่องเมื่อทำงานกับไฟล์ เราคิดว่าการดำเนินการนี้จะช่วยเร่งเวิร์กโฟลว์สำหรับเอดิเตอร์ที่ทำงานอย่างหนักในแต่ละวัน ซึ่งเป็นหนึ่งในสิ่งสำคัญที่สุดของเรา